<template>
    <div>


        <el-container class="home-container">
            <el-header>
                <div>
                    <img src="@/assets/logo.png" alt="" style="width: 40px;height: 40px;">
                    <span class="text1">电商后台管理系统</span>
                </div>
                <el-button type="info" @click="layout()"> 退出</el-button>
            </el-header>
            <el-container>
                <el-aside width="iszhedie? 64px:200px">
                    <!-- 左侧菜单折叠 -->
                    <div class="zhedie" @click="zhedie()">|||</div>

                    <el-menu class="el-menu-vertical-demo" background-color="#545c64" :default-active="defaultIndex"
                        text-color="#fff" active-text-color="#ffd04b" unique-opened :collapse="iszhedie" router>
                        <el-submenu :index="item.uuid" v-for="item in menus" :key="item.uuid">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item-group v-for="subitem in item.children" :key="subitem.uuid">

                                <el-menu-item :index="subitem.path" @click="handleDefautIndex(subitem.path)"> <i
                                        class="el-icon-menu"></i> {{
                                            subitem.name
                                        }}</el-menu-item>

                            </el-menu-item-group>

                        </el-submenu>

                    </el-menu>



                </el-aside>
                <el-main>

                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { delToken, getToken, setToken } from '@/util/SetTime.js';
import { getMenus } from '@/api/index.js';
export default {
    name: "homePage",
    data() {
        return {
            menus: [],
            iszhedie: false,
            defaultIndex: ''



        }
    },
    methods: {
        layout() {
            delToken("token");
            this.$router.push("/login");
        },
        zhedie() {
            this.iszhedie = !this.iszhedie
        }, handleDefautIndex(path) {
            setToken('path', path);
        }
    }, mounted() {
        getMenus().then(async (res) => {
            this.menus = res.data.data;
        })
        this.defaultIndex = getToken('path')
    }
}

// 在此添加组件的其他逻辑
</script>
<style scoped>
/* 在此添加组件的样式 */

.home-container {
    height: 100vh;
}

.el-header {
    background-color: aliceblue;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    font-size: 20px;
    align-items: center;
    color: red;

    >div {
        display: flex;
        align-items: center;

        .text1 {
            position: relative;
            left: 130px;
        }
    }



}

.el-aside {
    background-color: aqua;

    .zhedie {
        background-color: red;
        font-size: 10px;
        text-align: center;
        line-height: 20px;
        letter-spacing: 0.2em;

    }
}

.el-main {
    background-color: azure;
}

.el-menu {
    border-right: none;
}
</style>